﻿@import "../variables";

.msacademic .article { 
	padding-top: 25px; position: relative; 
	.hidden															{ height:0px; overflow: hidden; padding: 0; }
	
	.big-title														{ width: 100%; }
	.short-text														{ padding: 20px 0; }

	.image-mirrorlete { 
		padding: 45px 0 15px 0; 

		.full														{ float: left; margin-right: 20px; width:600px; overflow: hidden; }
		.semi														{ float: left; margin-right: 20px; width: 325px; overflow: hidden; opacity: 0.7; }
		.semi img													{ position: relative; margin-left: -50%;}
		.light														{ float: left; width: 175px; overflow: hidden; opacity: 0.2; }
		.light img													{ position: relative; margin-left: -80%;}
	}

	.author	{ 
		position: relative; margin: 15px 0 -85px -15px;
		a															{ background-color: @bg-base; border-radius: 999px; display: block; 
																	  width: 81px; height: 81px; padding: 4px; text-align: center; .background-transition(0.1s); }
		a img														{ width: 81px; height: 81px; border-radius: 999px; }
		a:hover														{ background-color: @orange-base;}
	}

	.tags { 
		width: 100%; padding-bottom: 25px; border-bottom: 1px solid lighten(@border-base-color, 15%);

		ul															{ width: 100%; background-color: lighten(@border-base-color, 18%);}
		li															{ display: block; float: left; border-right: 2px solid @bg-base; border-bottom: 2px solid @bg-base; }
		li a														{ display: block; font-size: 12px; padding: 6px 8px; color: @bg-base; 
																	  background-color: lighten(@grey-base, 20%); .background-transition(0.2s); }
		li a:hover													{ background-color: @grey-base; }
	}
	.articleBody {
		padding: 80px 0 25px 0; border-bottom: 1px solid lighten(@border-base-color, 15%); position: relative; max-width: 100%;

		img															{ max-width: 100% !important; }
		.long-text													{ float: left; width: 990px;  }
		.long-text .wrap											{ padding: 0 0 0 100px; }
	 
		.sidebar													{ float: left; width: 150px; min-height: 1px; display: block;  }
		.sidebar ul													{ list-style: none; padding: 0; }
		.sidebar .sidebar-content									{ background-color: #FAFDFF; width: 150px;}
		.sidebar .sidebar-content.sticky							{ position: fixed; top: 80px; }
		.sidebar .sidebar-content.bottom-reached					{ position: absolute; bottom: 32px;  }
		.sidebar .ui-jump-list .anchor								{ background-color: #fafafa; cursor: pointer; padding: 9px 12px; border-bottom: 1px solid @bg-base;
	 																  font-weight: bold; font-size: 11px; text-transform: uppercase; .background-transition(0.2s); }
	 
		.sidebar .ui-jump-list .anchor.active						{ background-color: @orange-base; color: white;  }						
		.sidebar .ui-jump-list .anchor:hover						{ background-color: lighten(@orange-base, 10); color: white; }						
		.sidebar .meta												{ border-bottom: 1px solid @bg-base; padding: 10px 12px; font-size: 11px; color: lighten(@text-base, 35%); 
	 																  background: lighten(#fafafa, 1%);	}
		.sidebar .fb-like											{ padding: 10px; }

		ul															{ padding: 30px; list-style: square inside; }
	}

	.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
	.fb-comments span, .fb-comments iframe span[style] {width: 100% !important;}

	.facebook-integration											{ padding: 20px 0 50px 0; }
	.facebook-integration .fb-like-wrapper							{ padding: 15px 0; background-color: #3B5998; width: 100%; margin-bottom: 15px; }
	.facebook-integration .fb-like-wrapper p						{ .segoeUILight_font_family; font-size: 21px; color: @bg-base; float: left; padding: 0 0 0 20px; }
	.facebook-integration .fb-like-wrapper .fb-like					{ float: left; padding: 5px 0 0 15px;  }							

}



/* Responsive design
==================================================== */
@media all and (max-width: 1600px) {
    .msacademic .article { 
		.image-mirrorlete .full										{ width: 500px; }
   		.image-mirrorlete .semi										{ width: 280px; }
   		.image-mirrorlete .light									{ width: 160px; }

		.author														{ margin-top: 0; padding-top: 20px; }
		.author a													{ height: 65px; width: 65px; }
		.author a img												{ height: 65px; width: 65px; }

		.articleBody												{ padding-top: 40px; }
		.articleBody .long-text										{ width: 830px; }
    }


}
@media all and (max-width: 1024px) {
    .msacademic .article { 
		.image-mirrorlete .full										{ width: 100%; }
		.image-mirrorlete .semi										{ display: none; }
		.image-mirrorlete .light									{ display: none; }

		.author a													{ height: 45px; width: 45px; }
		.author a img												{ height: 45px; width: 45px; }

		.articleBody .sidebar										{ display: none; }
		.articleBody .long-text										{ width: 100%; }
		.articleBody .long-text .wrap								{ padding: 0; }
    }
}

@media all and (max-width: 600px) {
    .msacademic .article {
        .articleBody .long-text { width: 100% !important; }
    }
}
